<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>SERVERS</title>
  <!-- Demo styles -->
  <style>


  </style>
  <script src="../font_ico/iconfont.js"></script>
  <!-- 引用bootstrap核心css -->
  <link rel="stylesheet" href="../css/bootstrap.min.css">

  <!-- 引用动画库 -->
  <link rel="stylesheet" href="../css/animate.min.css">

  <!-- 引用重置样式表 -->
  <link rel="stylesheet/less" href="../css/reset.less">

  <!-- 引用公共样式 -->
  <link rel="stylesheet/less" href="../css/common.less">

  <!-- 引用该页面样式 -->
  <link rel="stylesheet/less" href="../css/servers.less">
  <link rel="stylesheet" href="../css/swiper-bundle.min.css">

</head>

<body>
<div class="warp">
  <div class="nav-mtop">
    <div>
      <div class="nav-mtop-l">
        <div><img src="" alt=""><span>Call Us: (0) 123 456 789</span></div>
        <div><img src="" alt=""><span>jetspace@mail.com</span></div>
      </div>
      <div class="nav-mtop-r">
        <img src="../images/gq1024.png" alt="">

        <select>
          <option>中国</option>
        </select>
      </div>
    </div>

  </div>
  <header class="header" id="header">
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- 移动端的导航按钮 -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- logo -->
          <a class="navbar-brand wow fadeInLeft" href="../index.html"><img src="../images/logo.png"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <!-- 导航栏 -->
          <ul class="nav navbar-nav navbar-right">
            <!-- HOME          About          SERVICES          portfolio        -->
            <li><a href="../index.html" class="wow fadeInRight" data-wow-delay="100ms">HOME</a></li>
            <li><a href="./about.html" class="wow fadeInRight" data-wow-delay="200ms">About</a></li>
            <li><a href="./servers.html" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
            <li><a href="./blog.html" class="wow fadeInRight" data-wow-delay="300ms">BLOG</a></li>
            <li><a href="./contact.html" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
            <li>
              <div><input type="text" placeholder="Search"> <img src="../images/ssIcon.png" alt=""></div>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>
  <div class="mid-title">
    <div class="tips">
      <p class="p1">Our Services</p>
      <p class="p2">Vivamus magna justo, lacinia eget consectetur sed, convallis at
      </p>
    </div>

    <img src="../images/Clouds3.png" alt="">
  </div>
  <div class="server">
    <div class="server-div">
      <img src="../images/Server.png" alt="">
      <div class="server-res-div">
        <h1>Super fast <span>servers</span></h1>
        <p class="p1">SAFE,FAST AND AWESOME PRICE</p>
        <p class="p2">Vestibulum ac diam sit amet quam vehicula elementum sed sit am</p>
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Super Special Offer/$2,99/MO
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Unlimited Bandwidth and Space
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Daily Backups
          </li>
        </ul>

      </div>
    </div>
  </div>
  <div class="title-h">
    <h1> &nbsp;</h1>
  </div>
  <div class="server">
    <div class="server-div">
      <div class="server-res-div">
        <h1>Modern  <span>and fast</span></h1>
        <p class="p1">SAFE,FAST AND AWESOME PRICE</p>
        <p class="p2">Vestibulum ac diam sit amet quam vehicula elementum sed sit am</p>
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Super Special Offer/$2,99/MO
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Unlimited Bandwidth and Space
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Daily Backups
          </li>
        </ul>

      </div>
      <img src="../images/severs2.png" alt="">

    </div>
  </div>
  <div class="title-h">
    <h1> &nbsp;</h1>
  </div>
  <div class="server">
    <div class="server-div">
      <img src="../images/servers3.png" alt="">
      <div class="server-res-div">
        <h1>Safe  <span>and protected </span></h1>
        <p class="p1">SAFE,FAST AND AWESOME PRICE</p>
        <p class="p2">Vestibulum ac diam sit amet quam vehicula elementum sed sit am</p>
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Super Special Offer/$2,99/MO
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Unlimited Bandwidth and Space
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gougou"></use>
            </svg>
            Daily Backups
          </li>
        </ul>

      </div>


    </div>
  </div>
  <div class="title-h">
    <h1> Why we are best?</h1>
  </div>
  <div class="container-fluid mune">
    <div class="row">
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>
      <div class="munelist1 col-lg-4 col-md-6 col-sm-12">
        <div class="munelist-in">
          <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
          <div class="mune-r">
            <span class="p1">Modern Technology</span>
            <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
          </div>
        </div>
      </div>



    </div>
  </div>
  <div class="banner-lunbo">


  </div>
  <div class="contact-us">
    <div>
      <h1>Feel free to contact us for custom plans</h1>

      <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
        Donec sollicitudin molue in ipsum</p>
      <a href="">Contact Us</a>

    </div>

  </div>
  <div class="end container-fluid">
    <div class="endlist row">
      <div class="col-lg-3 col-md-6">
        <p class="p1">Menu</p>
        <ul>
          <li>HOME</li>
          <li>SERVICES</li>
          <li>ABOUT US</li>
          <li>BLOG</li>
          <li>CONTACT US</li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">We Offer</p>
        <ul>
          <li>BUSINESS HOSTING</li>
          <li>PRIVATE HOSTING</li>
        </ul>
        <p class="p1">Service</p>
        <ul>
          <li>FIRST SERVICE</li>
          <li>SECOND SERVICE</li>
          <li>FIRST SERVICE</li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">Our Blog</p>
        <p class="p2">Lorem Ipsum sample text</p>
        <p class="p3">Vivamus suscipit tortor eget felis porttitor
          volutpat. Curabitur arcu erat, accumsan id
          imperdiet et, porttitor at sem. Curabitur arcu
          erat, accumsan.
        </p>
        <p class="p4">Read More</p>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">We Are Social</p>
        <img src="../images/Social%20Icons.png" alt="">
      </div>
    </div>
    <img src="../images/Clouds3.png" alt="">
  </div>



</div>
</body>

</html>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/swiper-bundle.min.js"></script>

<script>
  //实例化wow.js
  new WOW().init();
  var swiper = new Swiper(".mySwiper", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

</script>